<template>
  <div class="menu-content zb-sql">
    <!-- :style="{'height':divHeight+'px'}" -->
    <p class="right-title" style="display: flex;justify-content: space-between;">
      数据处理SQL语句
      <a style="color: #144FEC;font-size: 14px;" @click="goBack">返回上一级</a>
    </p>
    <div class="copyAll"><a @click="copy" v-clipboard:copy="copyUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制全文</a></div>
    <div ref="text" class="sql-content" v-html="sqlInfo"></div>

  </div>
</template>
<script>
  export default {
    components: {

    },
    data() {
      return {
        procId: this.$route.query.procId,
        sqlInfo: '',
        ids: this.$route.query.ids ? this.$route.query.ids : '',
        divHeight: document.documentElement.clientHeight - 350,
        copyUrl: ''
      };
    },
    mounted() {

    },
    created() {
      this.getSql()
    },
    methods: {
      copy() {
        this.copyUrl = this.$refs.text.innerText
      },
      onCopy(e) {
        this.$message.success('复制成功！')
      },
      onError(e) {
        this.$message.error('复制失败！')
      },
      goBack() {
        this.$router.go(-1)
        // this.$router.push({
        //   name: 'zbIndex',
        //   query: {
        //     procId: this.procId,
        //     isSql: true
        //   }
        // });
      },
      getSql() {
        let param = {
          procId: this.procId,
          Ids: this.ids
        }
        this.$Http
          .post("etlProdSecInfo/sqlPreview", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.sqlInfo = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    destroyed() {}
  };
</script>

<style scoped lang="scss">
  .zb-sql {
    padding: 10px;
    box-sizing: border-box;
    // overflow-y: scroll;
    height: 100%;

    .sql-content {
      margin-top: 15px;
      font-size: 14px;
      color: #000622;
    }

    .copyAll {
      margin-top: 20px;

      a {
        display: inline-block;
        padding: 6px 10px;
        color: white;
        background: #0F49ED;
        font-size: 14px;
      }
    }
  }
</style>
